import React, { Component } from 'react';
import { Breadcrumb, Avatar } from 'antd';

const breadcrumbNameMap = {

  '/order/merchant': '商户交易查询',
  '/settlement/reconciliate': '商户对账管理',
  '/main': '首页',
};

export default class BreadNav extends Component {
  render() {
    const { location, loginout, name = '' } = this.props;
    const pathSnippets = location.pathname.split('/').filter(i => i);
    return (
      <div style={{ display: 'flex', margin: '0 24px', justifyContent: 'space-between' }}>
        <Breadcrumb>
          {
            pathSnippets.length ?
              pathSnippets.map((item, key) => {
                const url = `/${pathSnippets.slice(0, key + 1).join('/')}`;
                return (
                  breadcrumbNameMap[url] ?
                    <Breadcrumb.Item key={url}>
                      {
                        <span style={{fontSize: 16}}>
                          {breadcrumbNameMap[url]}
                        </span>
                      }
                    </Breadcrumb.Item> : null
                );
              })
              : null
          }
        </Breadcrumb>
        <div style={{display: 'flex', alignItems: 'center'}}>
          <Avatar style={{ backgroundColor: '#55a8fd', marginRight: 10 }} icon="user" />
          <span className="login-out-split">{name ? name : localStorage.getItem('data') ? JSON.parse(localStorage.getItem('data')).name : ''}</span>
          <a onClick={() => loginout()}>退出</a>
        </div>
      </div>
    );
  }
}
